<template>
<!-- 住所情况 -->
	<div class="main">
		<div class="form-container">
			<div  class="form-main">
				<span class="one_title">&nbsp;&nbsp;五、住所情况&nbsp;&nbsp;</span>
				<div class="residence">
					
					<label for="residence">1. 现居住地址（今天住在哪儿？）</label><!--<span class="required" style="color:red">*</span>--><br/>
					<input class="form-border" id="residence" type="text" readonly @click="showSelectPopup=true" name="residence"  placeholder="请填写所住区域" v-model="residence"  /> <br/>
				</div>
				<div class="yy-c currentProvince">
					
					<label for="currentProvince">2. 您所在的小区</label><!--<span class="required" style="color:red">*</span>-->
					<input class="form-border" id="currentProvince" maxlength="32" type="text" name="currentProvince"   placeholder="小区"  v-model="community"  /> <br/>
				</div>
				<div class="yy-city-distance">
					<div class="yy-c currentCity" >
						<!-- <span class="required" style="color:red">*</span> -->
						<label for="currentCity">楼号</label>
						<input class="form-border" id="currentCity" maxlength="10" type="text" name="currentCity"  placeholder="楼号"  v-model="building"   @blur="verifyBar($event)" /> <br/>
					</div>
					<div class="yy-c yy-ccurrentCounty" >
						<!-- <span class="required" style="color:red">*</span> -->
						<label for="currentCounty">单元</label>
						<input class="form-border" id="currentCounty" maxlength="10" type="text" name="currentCounty"  placeholder="单元"  v-model="unit"   @blur="verifyBar($event)" /> <br/>
					</div>
					<div class="yy-c yy-ccurrentCounty" style='margin-right: 0;'>
						<!-- <span class="required" style="color:red">*</span> -->
						<label for="roomNumber">房间号</label>
						<input class="form-border" id="roomNumber" maxlength="10" type="text" name="roomNumber"  placeholder="房间号"  v-model="roomNumber"   @blur="verifyBar($event)" /> <br/>
					</div>
				</div>
			</div>

		</div>
		<div v-transfer-dom>
			<popup v-model="showSelectPopup" @on-hide="changeState('hide')" @on-show="changeState('show')"  height="50%">
				<menuLinkage :queryObj="casList" @setCityObj="setCityObj" ref="menuLinkage" />
			</popup>
		</div>

		<div v-transfer-dom>
			<popup v-model="showSelectCityPopup" @on-hide="changeState('hide')" @on-show="changeState('show')" height="50%">
				<menuLinkage :queryObj="casListCity" @setCityObj="setCityObjTwo" ref="menuLinkageTwo" />
			</popup>
		</div>
		<div v-transfer-dom>
			<popup v-model="showSelectToCityPopup" @on-hide="changeState('hide')" @on-show="changeState('show')" height="50%">
				<menuLinkage :queryObj="casListCity" @setCityObj="setToCityObjTwo" ref="menuLinkageOne" />
			</popup>
		</div>

	</div>
</template>
<script>
import { requestEnterpriseData ,queryCityData,queryCityDataForTwo,} from '@/assets/js/service'
import fromConfig from '../../../static/formConfig'
import { Confirm , Datetime,PopupPicker,Popup,TransferDom} from 'vux'
import menuLinkage from '../commons/menuLinkage.vue'
import { forbiddenBar } from '@/assets/js/common'

export default {
	directives: {
		TransferDom
	},
    components: {
        Confirm,
        Datetime,
        PopupPicker,
        Popup,
        menuLinkage
    },
    data () {
        return {
            nativePlace:'1',
            casList:[],
            casModel:[],
            casListCity:[],
            showSelectPopup:false,//是否显示级联组件
            showSelectCityPopup:false,//显示城市组件
            showSelectToCityPopup:false,//显示去的城市组件
            flagCity:"",//标识当前选中城市赋值

            address:'',//固定居住地址（城市、区县、街道、社区、小区、楼栋、单元、楼层、房间号）
            residence:'',//
            community:'',//您所在的小区
            communityCode:'',//小区编码
            building:'',//楼号
            unit:'',//单元
            roomNumber:'',//房间号

            currentProvince:'',//当前所在省
            currentCity:'',//市（当前所在地）
            currentCounty:'',//区/县
            currentCountry:'',//街道/乡/镇
            currentVillage:'',//社区/村
			 //新增
            currentProvinceCode:'',//当前所在省 code
            currentCityCode:'',//当前所在市 code
            currentCountyCode:'',//当前所在区/县 code
            currentCountryCode:'',//街道/乡/镇（当前所在地）code
            currentVillageCode:'',////社区/村（当前所在地）code
            communityCode:'',//小区code


            countdown:"5",//倒计时
            countdownFlag:true,
            info:{
                commuityCode:'',//小区编码
                commuityName:'',//小区名称
                regionalismCode:'',//行政区划code
                responsible:'',//责任人
                responsiblePhone:'',//责任人电话
            }
        }
    },
    created () {
		// commuityCode=小区编码&commuityName=小区名称&regionalismCode=行政区划code &responsible=责任人&responsiblePhone=责任人电话
		this.info=this.$route.query;
		console.log(this.info)
		this.community=this.info.commuityName;//小区名称
		this.communityCode=this.info.commuityCode;//小区编码
		// this.regionalismCode=this.info.regionalismCode;//行政区划code
		this.initcascade();
    },
    mounted: function () {
			let arr = JSON.parse(localStorage.getItem('enterpriseHomeData'))
			if(arr) {
				let personInfo = JSON.parse(arr[0])
				this.currentProvinceCode =personInfo.currentProvince;
        this.currentCityCode = personInfo.currentCity;
        this.currentCountyCode = personInfo.currentCounty;
        this.currentCountryCode = personInfo.currentCountry;
        this.currentVillageCode = personInfo.currentVillage;
        this.communityCode = personInfo.commuityCode;
        this.community = personInfo.community;
        this.building = personInfo.building;
        this.unit = personInfo.unit;
		this.roomNumber = personInfo.roomNumber;
		this.residence=personInfo.residence;
			}				
		},    watch:{
    },
    methods: {
		changeState(statusFlag){
			console.log(statusFlag)
		},
		openCityShow(flag){
			this.flagCity=flag;
			this.showSelectCityPopup=true;

		},
		openToCityShow() {
			this.showSelectToCityPopup=true;
		},
        initcascade(){
            let _this=this;
            queryCityData({"parentCode":"000000"},function(res){
                // console.log("resaaaaaaaaaaaaaaaaaaaa==>",res)
                _this.casList=[];
                if(typeof(res.data)!="undefined"&&res.data.length>0){
                    _this.casList=res.data;
										_this.$refs.menuLinkage.initData(_this.casList,1);
										// 去掉默认的北京市固定地址
                    // _this.$refs.menuLinkage.setDefault(['北京市'])
                }
			})
			//初始化行政区划二级
            queryCityDataForTwo({},function(res){
                console.log("res==>",res)
                _this.casListCity=[];
                if(typeof(res.data)!="undefined"&&res.data.length>0){
                    _this.casListCity=res.data;
										_this.$refs.menuLinkageTwo.initData(_this.casListCity,0);
										_this.$refs.menuLinkageOne.initData(_this.casListCity,0);
                }
            })
		},
		setCityObj(_list){
            if(typeof(_list[0])!='undefined'){
                this.currentProvince=_list[0].name;
				this.currentProvinceCode=_list[0].code;
				this.residence=_list[0].name;
            }
            if(typeof(_list[1])!='undefined'){
                this.currentCity=_list[1].name;
				this.currentCityCode=_list[1].code;
				this.residence=this.residence+"/"+_list[1].name;
            }
            if(typeof(_list[2])!='undefined'){
                this.currentCounty=_list[2].name;
				this.currentCountyCode=_list[2].code;
				this.residence=this.residence+"/"+_list[2].name;
            }
            if(typeof(_list[3])!='undefined'){
                this.currentCountry=_list[3].name;
				this.currentCountryCode=_list[3].code;
				this.residence=this.residence+"/"+_list[3].name;
            }else{
                this.currentCountry="";
            }
            if(typeof(_list[4]) !='undefined'){
              this.currentVillage = _list[4].name;
			  this.currentVillageCode = _list[4].code;
			  this.residence=this.residence+"/"+_list[4].name;
            } else {
              this.currentVillage = '';
            }
            this.showSelectPopup=false;
		},
		setToCityObjTwo(_list){
			 if(typeof(_list[0])!='undefined'){
					this.toCity=_list[0].name;
				}
				if(typeof(_list[1])!='undefined'){
					this.toCity=this.toCity+"/"+_list[1].name;
				}
				this.showSelectToCityPopup=false;
		},
		setCityObjTwo(_list){
			if(this.flagCity=="toCity"){
				 if(typeof(_list[0])!='undefined'){
					this.toCity=_list[0].name;
				}
				if(typeof(_list[1])!='undefined'){
					this.toCity=this.toCity+"/"+_list[1].name;
				}
			}else if(this.flagCity=="currentCityName"){
				 if(typeof(_list[0])!='undefined'){
					this.currentCityName=_list[0].name;
				}
				if(typeof(_list[1])!='undefined'){
					this.currentCityName=this.currentCityName+"/"+_list[1].name;
				}
			}
			this.showSelectCityPopup=false;

		},
		verifyBar(e) {
			console.log('wanchegnle 输入')
			let reg = /[@#\$%\^&\*]+/g
			if(reg.test(e.target.value)){
				window.vm.$vux.toast.text('含有非法字符，请重新输入', 'center')
			}
			// e.target.value = forbiddenBar(e.target.value);
		}
    }
}
</script>
<style lang="less" scoped>

.main{
	// overflow: hidden;
	height: 100%;
		background-size: 100% 100%;
    .form-container{
		height: 100%;
        background: #f8fafb;
        border-left: 1px solid #e5e5e5;
        border: 1px solid #e5e5e5;
        background-size: 100% 100%;
        width: calc(100% -16px);
        // margin: 0 3%;
        margin-left:8px;
        margin-right:8px;
        margin-bottom: 10px;
        border-radius: 8px;
        .name {
          	padding-top: 15px;
        }
        .form-main{
			width: 100%;
			height: 100%;
			// overflow:scroll;
			// margin-top: 130px;
			border-radius: 5px;
			padding: 0 20px;
			padding-top: 40px;
			color: #333333;
			position: relative;
			.query-time{
				position: relative;
			}
			label{
				font-size: 15px;
				font-weight: bold;
			}
			.one_title{
				height: 30px;
				line-height: 21px;
				display: block;
				position: absolute;
				font-size: 17px;
				font-weight: 700;
				top: 0;
				left: 10px;
				border-bottom-left-radius: 12px;
				border-bottom-right-radius: 12px;
				padding: 4px 0;
				background: rgba(119,136,153,.2);
			}
            .warn-content{
                margin-top: 10px;
                margin-bottom: 18px;
                line-height: 30px;
                font-size: 15px;
            }
            h2{
                text-align: center;
                color: #fff;
                width: calc(100% + 40px);
                margin-left: -20px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.24);
                height: 60px;
                line-height: 60px;
                font-size: 24px;
            }
            h4{
                margin-top: 15px;
            }
            .form-border{
                background-color: rgba(255, 255, 255, 0.9);
                color: #333333;
                padding:5px;
                margin: 9px 0;
                width: 100%;
                margin-bottom: 20px;
                border-radius: 3px;
            }
            .tizheng{
                div{
                    width: 33.3333%;
                    float: left;
                    padding: 10px 5px;
                    font-size: 15px;
                    input{
                        vertical-align: middle;
                        width: 15px;
                        height: 15px;
                    }
                }
            }
            .form-twoBor{
                padding: 5px 0;
                div{
                    width: 100%;
                    padding: 5px 10px;
                    input{
                        vertical-align: middle;
                        width: 20px;
                        height: 20px;
                    }
                    label{
                        font-size: 15px;
                    }
                }

            }

        }
        .form-submit{
            width: 90%;
            margin-left: 5%;
            height: 50px;
            background: #228ed9;
            border-radius: 8px;
            color: white;
            font-size: 15px;
            border: none;
            outline: none;
        }
        .form-submiTime{
			width: 90%;
			margin-left: 5%;
			height: 50px;
			background: #228ed940;
			border-radius: 8px;
			color: white;
			font-size: 15px;
			border: none;
			outline: none;
        }
    }
	label{
	//  margin-bottom: 15px;
	}

	input{
		border: 1px solid #cccccc;
	}
	.el-input__inner{
		color: #fdfdfd;
	}
	.el-radio{
		margin: 5px;
		left: -5px;
		width: 100%;
		.el-radio__label{
			color: #000;
		}
		.el-radio__input.is-checked+.el-radio__label{
			color: #000 !important;
		}
		// .el-radio__input .is-checked+.el-radio__label {
		//   color: #000 !important;
		// }
	}
	.el-checkbox{
		width: 100%;
	}
	.yy-city-distance{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.yy-c{
			flex: 1;
			margin-right: 10px;
		}
	}
	#residence{
		// font-size: 12px;
		height: 40px;
	}
	p {
		font-size: 15px;
		padding-left: 5px;
	}
	.textAreaBox {
		position: relative;
		height: 8em;
		padding: 0;
		z-index: 2;
		textarea {
			position: relative;
			width: 100%;
			height: 100%;
			padding: 10px;
		}
		span {
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 1;
			color: #ccc;
		}
	}
}
</style>
